<template>
  <div
    style="
      width: 715px;
      height: 553px;
      background-color: rgba(0, 0, 0, 0.59);
      position: fixed;
      top: 120px;
      left: 50%;
      transform: translateX(-50%);
    "
  >
    <div id="production-storage-container">
      <div class="card-top">消防车</div>
      <!-- 基本信息 -->
      <div class="base-info">
        <Title :title-info="basicInfo" />
        <el-form
          :model="data.fireCarInfo"
          label-width="110px"
          class="demo-ruleForm"
          status-icon
          style="width: 95%; margin: 0 auto"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="车辆名称">
                <el-input v-model.trim="data.fireCarInfo.jdccphm" style="width: 90%" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="车辆类型">
                <el-select
                  v-model="data.fireCarInfo.cllx"
                  placeholder="请选择车辆类型"
                  style="width: 90%"
                >
                  <el-option
                    v-for="item in cllxoptions"
                    :key="item.zddm"
                    :label="item.zdmc"
                    :value="item.zddm"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="载水量">
                <el-input v-model.trim="data.fireCarInfo.zsl" style="width: 90%">
                  <template #suffix>
                    <i style="font-style: normal">T</i>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="泵流量">
                <el-input v-model.trim="data.fireCarInfo.bll" style="width: 90%">
                  <template #suffix>
                    <i style="font-style: normal">L/s</i>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <!-- <el-col :span="12">
              <el-form-item label="泡沫比例">
                <el-input v-model.trim="data.fireCarInfo.pmbl" style="width: 90%" />
              </el-form-item>
            </el-col> -->

            <el-col :span="12">
              <el-form-item label="B类泡沫载量">
                <el-input v-model.trim="data.fireCarInfo.blpmzl" style="width: 90%">
                  <template #suffix>
                    <i style="font-style: normal">T</i>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="泡沫名称">
                <el-input v-model.trim="data.fireCarInfo.pmlx" style="width: 90%" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="最大举升高度">
                <el-input v-model.trim="data.fireCarInfo.zdjsgd" style="width: 90%">
                  <template #suffix>
                    <i style="font-style: normal">m</i>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="干粉载量">
                <el-input v-model.trim="data.fireCarInfo.gfzl" style="width: 90%">
                  <template #suffix>
                    <i style="font-style: normal">m³</i>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="二氧化碳载量">
                <el-input v-model.trim="data.fireCarInfo.eyhtzl" style="width: 90%">
                  <template #suffix>
                    <i style="font-style: normal">m³</i>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="水带铺设车铺设距离">
                <el-input v-model.trim="data.fireCarInfo.sdpscjl" style="width: 90%">
                  <template #suffix>
                    <i style="font-style: normal">m</i>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注">
                <el-input v-model.trim="data.fireCarInfo.bz" style="width: 96%" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <!-- 底部按钮 -->
      <div class="button">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-button @click="closeEdit">取&nbsp;消</el-button>
          </el-col>
          <el-col :span="8">
            <el-button @click="formReset">重&nbsp;置</el-button>
          </el-col>
          <el-col :span="8">
            <el-button style="background-color: rgba(2, 151, 155, 1)" @click="fireCarInfoSave"
              >保&nbsp;存</el-button
            >
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import upload from '@/components/upload/index.vue'
import FooterButton from '@/components/FooterButton/index.vue'
import Title from '@/components/title/index.vue'
import { quyerFireCarInfo, AddFireCarInfo } from '@/service/api/ProfessionalTeam'
import { queryZdZdmcInfo } from '@/service/api/common'
import { useChemicalStore } from '@/store'
import { ElMessage } from 'element-plus'
import { checkNumberTypeAndLength } from '@/utils/common'
import { useProfessionalStore } from '@/store'
const syztoptions = ref()
const basicInfo = ref('基本信息')
const chemicalStore = useChemicalStore()
const ruleFormRef = ref<FormInstance>()
const props = defineProps<{
  qyzzdId: any
}>()

//表单数据
const data = useProfessionalStore()
//查询车辆类型
// queryZdZdmcInfo({key:'cllx'}).then(res => console.log(res))

const cllxoptions = ref()
const emits = defineEmits(['closeFireCar', 'uploadCarList'])
// 取消关闭编辑窗口
const closeEdit = () => {
  Object.keys(data.fireCarInfo).map((key) => delete data.fireCarInfo[key])
  emits('closeFireCar', false)
}

// 重置表单
const formReset = () => {
  data.fireCarInfo.jdccphm = ''
  data.fireCarInfo.cllx = cllxoptions.value[0].zddm
  data.fireCarInfo.zsl = ''
  data.fireCarInfo.bll = ''
  data.fireCarInfo.blpmzl = ''
  data.fireCarInfo.pmlx = ''
  data.fireCarInfo.zdjsgd = ''
  data.fireCarInfo.gfzl = ''
  data.fireCarInfo.eyhtzl = ''
  data.fireCarInfo.sdpscjl = ''
  data.fireCarInfo.bz = ''

  // Object.keys(data.fireCarInfo).map((key) => delete data.fireCarInfo[key])
  // console.log(data.fireCarInfo);
}
function querysyzt() {
  queryZdZdmcInfo({ key: 'cllx' }).then((res: any) => {
    cllxoptions.value = res
    if (!data.fireCarInfo.cllx) {
      data.fireCarInfo.cllx = cllxoptions.value[0].zddm
    }
    //
  })
}
//保存消防车辆信息
const fireCarInfoSave = async () => {
  // let flag = false
  // if (!data.fireCarInfo.jdccphm || !data.fireCarInfo.cllx) {
  //   // console.log(key, '字段未填写')
  //   flag = true
  // }

  // if (flag) {
  //   return (chemicalStore.FormCheckConfirmShow = true)
  // }

  if (!checkNumberTypeAndLength(data.fireCarInfo.zsl, '载水量', 6)) {
    return
  } else if (!checkNumberTypeAndLength(data.fireCarInfo.bll, '泵流量', 6)) {
    return
  }
  //  else if (!checkNumberTypeAndLength(data.fireCarInfo.pmbl, '泡沫比例', 4)) {
  //   return
  // }
  else if (!checkNumberTypeAndLength(data.fireCarInfo.blpmzl, 'B类泡沫载量', 6)) {
    return
  } else if (!checkNumberTypeAndLength(data.fireCarInfo.zdjsgd, '最大举升高度', 6)) {
    return
  } else if (!checkNumberTypeAndLength(data.fireCarInfo.gfzl, '干粉载量', 6)) {
    return
  } else if (!checkNumberTypeAndLength(data.fireCarInfo.eyhtzl, '二氧化碳载量', 6)) {
    return
  } else if (!checkNumberTypeAndLength(data.fireCarInfo.sdpscjl, '水带铺设车铺设距离', 6)) {
    return
  }
  // if (
  //   (data.fireCarInfo.zsl && data.fireCarInfo.zsl.length > 4) ||
  //   (data.fireCarInfo.bll && data.fireCarInfo.bll.length > 4) ||
  //   (data.fireCarInfo.pmbl && data.fireCarInfo.pmbl.length > 4) ||
  //   (data.fireCarInfo.blpmzl && data.fireCarInfo.blpmzl.length > 4) ||
  //   (data.fireCarInfo.pmlx && data.fireCarInfo.pmlx.length > 4) ||
  //   (data.fireCarInfo.zdjsgd && data.fireCarInfo.zdjsgd.length > 4) ||
  //   (data.fireCarInfo.gfzl && data.fireCarInfo.gfzl.length > 4) ||
  //   (data.fireCarInfo.eyhtzl && data.fireCarInfo.eyhtzl.length > 4) ||
  //   (data.fireCarInfo.sdpscjl && data.fireCarInfo.sdpscjl.length > 4)
  // ) {
  //   return ElMessage({
  //     message: '长度不能大于4位',
  //     type: 'warning',
  //     customClass: 'messClass',
  //   })
  // }

  data.fireCarInfo.qyid = chemicalStore.qyInfo.id
  data.fireCarInfo.qyzzdid = props.qyzzdId
  const res = await AddFireCarInfo({ ...data.fireCarInfo, sfyx: 1 })
    .then(() => {
      emits('uploadCarList')
      ElMessage.success('保存成功')
    })
    .catch(() => {
      ElMessage.error('保存成功')
    })

  closeEdit()
}
onMounted(() => {
  querysyzt()
})
</script>
<style>
.messClass {
  margin-top: 100px;
}
</style>
<style lang="less" scoped>
#production-storage-container {
  margin-top: 5px;
  margin-left: 7px;
  width: 700px;
  height: 540px;
  background: rgba(1, 7, 17, 0.8);
  .card-top {
    text-align: center;
    height: 50px;
    line-height: 50px;
    font-size: 24px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid #797979;
  }
  .base-info {
    padding: 10px 15px;
  }
  .card-item-title {
    margin: 10px 20px 15px;
    font-size: 20px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    // background-image: url('@/assets/image/card-item-title-bck.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  /deep/.el-form-item__label {
    display: unset;
    line-height: unset;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    text-align-last: justify;
  }
  /deep/.el-input__inner {
    border: unset !important;
    color: rgba(255, 255, 255, 0.8);
  }
  /deep/.el-input__wrapper {
    border: 1px solid rgba(121, 121, 121, 1);
    box-shadow: unset;
    background-color: unset;
    box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
  }

  .upload-container {
    padding: 0 10px;
    ::v-deep .border-content {
      width: 110px;
    }
  }

  /deep/ .button {
    transform: translateX(14%);
    margin-right: 19%;
    margin-top: 6px;
    .el-button {
      width: 140px;
      height: 33px;
      border: unset;
      border-radius: 10px;
      font-size: 22px;
      font-family: MicrosoftYaHei;
      color: rgba(255, 255, 255, 0.8);
      background-color: rgba(119, 128, 130, 1);
    }
  }
}
</style>
